import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
    Form,
    Input,
    Card,
    Tag,
    Row,
    Col,
    Modal,
    Collapse,
    Switch,
    Spin
} from 'antd';


import styles from './CustomerList.less';

const Panel = Collapse.Panel;
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 18,
    },
};


@connect(({ product, system, channel }) => ({
    product, system, channel
}))
@Form.create()
export default class ProductEditor extends PureComponent {

    constructor(props) {
        super(props);
    }

    state = {
        openState: false,
        isSwitchOn: false,
        // channelDetailsState: '',
    }

    componentDidMount() {
        const { dispatch, location } = this.props;

        // const params = querystring.parse(location.search.slice(1));
        // this.setState({
        //     openState: productList.relateBranch == 1 ? true : false
        // })
        // console.log("handleProductState", this.state.openState)
        // dispatch({
        //     type: 'product/getProductDiviList',
        // });
    }

    handleAdustPrice = (item, e) => {
        const { dispatch } = this.props;
        const { channelDetailsState } = this.props;
        item.adjustPrice = e.target.value;
        if (channelDetailsState == 6) {//编辑
            dispatch({
                type: 'system/changeProductRelateBranch',
                payload: {
                    item
                },
            })
        } else {
            dispatch({
                type: 'system/changeAddProduct',
                payload: {
                    item
                },
            })
        }
    }

    handleProductSize = (item, e) => {
        const { dispatch } = this.props;
        const { channelDetailsState } = this.props;
        // console.log("productSize",e.target.value)
        item.productSize = e.target.value;
        if (channelDetailsState == 6) {//编辑
            dispatch({
                type: 'system/changeProductRelateBranch',
                payload: {
                    item
                },
            })
        } else {
            dispatch({
                type: 'system/changeAddProduct',
                payload: {
                    item
                },
            })
        }
    }

    renderPanelContent = (item, channelDetailsState) => {

        const { productDiviList } = item;
        const { getFieldDecorator } = this.props.form;

        return (<div>
            <Form>
                <Card>
                    <Row>
                        <Col span={8}>
                            <FormItem label="产品名称"
                                {...formItemLayout}>
                                {item.productName}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="产品种类"
                                {...formItemLayout}>
                                {item.productType == 1 ? "分期" : "贷款"}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="产品有效期"
                                {...formItemLayout}>
                                {this.handleTime(item)}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <FormItem label="产品描述"
                                labelCol={{ span: 2 }}
                                wrapperCol={{ span: 22 }}>
                                {item.describe}
                            </FormItem>
                        </Col>
                    </Row>
                </Card>

                <Card>
                    {productDiviList && productDiviList.map((diviItem) => {
                        return <div>
                            <Row>
                                <Col span={8}>
                                    <FormItem label={`${diviItem.nper}期价格`}
                                        {...formItemLayout}>
                                        {diviItem.price}%
                                    </FormItem>
                                </Col>
                                <Col span={16}>
                                    <FormItem label="调整价格"
                                        {...formItemLayout}>
                                        {getFieldDecorator(`adjustPrice[${diviItem.id}]`, {
                                            initialValue: diviItem.adjustPrice,
                                        })(
                                            <Input
                                                placeholder="请输入"
                                                style={{ width: '60%' }}
                                                disabled={item.relateBranch == 1 ? false : true}
                                                onChange={this.handleAdustPrice.bind(this, diviItem)}
                                            />
                                        )}%
                                        </FormItem>
                                </Col>
                            </Row>
                        </div>
                    })}
                    <Row>
                        <Col span={8}>
                            <FormItem label="额度"
                                {...formItemLayout}>
                                {getFieldDecorator(`productSize[${item.id}]`, {
                                    initialValue: item.productSize,
                                })(
                                    <Input
                                        placeholder="请输入"
                                        style={{ width: '60%' }}
                                        disabled={item.relateBranch == 1 ? false : true}
                                        onChange={this.handleProductSize.bind(this, item)}
                                    />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Card>
            </Form>
        </div>);
    }

    handleTime = (item) => {
        if (item.timeValid == 0) {
            return `${item.beginTime} - ${item.endTime}`
        } else {
            return `${item.beginTime} - 永久`
        }
    }

    handleSwitchChange = (item, channelDetailsState) => {
        Modal.confirm({
            title: `你确定要${item.relateBranch != 1 ? '打开' : '关闭'}这个产品吗？`,
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                item.relateBranch = item.relateBranch == 1 ? null : 1;
                const { dispatch, location } = this.props;
                if (channelDetailsState == 6) {//组织架构编辑
                    dispatch({
                        type: 'system/changeProductRelateBranch',
                        payload: {
                            item
                        },
                    });
                } else {//组织架构新增
                    dispatch({
                        type: 'system/changeAddProduct',
                        payload: {
                            item
                        },
                    });
                }
            },
        });
    }

    renderPanelTitle = (item, channelDetailsState) => {
        return (<Row>
            <Col span={4}><span style={{
            }}>{item.productName}</span>
            </Col>
            <div>
                <Col span={3} style={{ textAlign: 'center' }} >
                    {/* {!this.state.openState ? */}
                    {item.relateBranch == 1 ?
                        <Tag color="green" size="large">开</Tag>
                        :
                        <Tag color="red" size="large">关</Tag>
                    }
                </Col>
                <div style={{ float: 'right', marginRight: '40px' }} onClick={(e) => {
                    e.stopPropagation();
                }}>
                    {/* {channelDetailsState != 2 && channelDetailsState != 5 ? */}
                    <Switch
                        checked={item.relateBranch == 1 ? true : false}
                        checkedChildren="开"
                        unCheckedChildren="关"
                        onChange={() => this.handleSwitchChange(item, channelDetailsState)} />
                    {/* :
                        null
                    } */}
                </div>
            </div>
        </Row>);
    }

    render() {
        const { system, channel } = this.props;
        const { channelDetailsState } = this.props;
        // const {channelProductDiviList} = channel;
        const { systemLoading, structureBranchList, systemProductDiviList } = system;
        const { productList } = structureBranchList;
        // console.log("systemProductDiviList", systemProductDiviList)
        // console.log("systemProductDiviList", systemProductDiviList)
        //编辑是6调获取详情接口   新增是7调代理权限信息接口
        return (
            <div>
                {systemLoading ?
                    <div className={styles.spinContainer}>
                        <Spin size="large" />
                    </div>
                    :
                    <div>
                        {channelDetailsState == 7 ?
                            systemProductDiviList &&
                            <Collapse bordered={true} key={systemProductDiviList.id}>
                                {systemProductDiviList.map(item => {
                                    return <Panel
                                        key={item.id}
                                        header={this.renderPanelTitle(item, channelDetailsState)} key={item.id}>
                                        {this.renderPanelContent(item, channelDetailsState)}
                                    </Panel>
                                })}
                            </Collapse>
                            :
                            productList &&
                            <Collapse bordered={true} key={productList.id}>
                                {productList.map(item => {
                                    return <Panel
                                        key={item.id}
                                        header={this.renderPanelTitle(item, channelDetailsState)} key={item.id}>
                                        {this.renderPanelContent(item, channelDetailsState)}
                                    </Panel>
                                })}
                            </Collapse>
                        }
                    </div>
                }
            </div>
        );
    }

}
